<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>收件箱</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: url('/static/background.jpg') no-repeat center center fixed;
            background-size: cover;
        }
        .container {
            background-color: rgba(255, 255, 255, 0.9);
            width: 80%;
            max-width: 800px;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            text-align: center;
            font-size: 36px;
            margin-bottom: 20px;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            color: white;
            background-color: #007bff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-bottom: 20px;
        }
        button:hover {
            background-color: #0056b3;
        }
        ul {
            list-style: none;
            padding: 0;
        }
        li {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            padding: 15px;
            margin-bottom: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #f9f9f9;
        }
        .email-details {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .email-actions {
            display: flex;
            gap: 5px;
        }
        li strong {
            font-size: 16px;
        }
        li button {
            font-size: 14px;
            padding: 8px 15px;
        }
        .modal {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 400px;
            padding: 20px;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            z-index: 1000;
        }
        .modal h2 {
            font-size: 24px;
            margin-bottom: 20px;
        }
        .modal .form-group {
            margin-bottom: 15px;
        }
        .modal .form-group label {
            display: block;
            margin-bottom: 5px;
        }
        .modal .form-group input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .modal button {
            padding: 10px 15px;
            font-size: 14px;
            margin-right: 10px;
        }
        .modal .btn-primary {
            background-color: #007bff;
            color: white;
        }
        .modal .btn-secondary {
            background-color: #6c757d;
            color: white;
        }
        .modal button:hover {
            opacity: 0.9;
        }
        .modal-backdrop {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 999;
        }
    </style>
    <script>
        function openImportModal() {
            document.getElementById("importModal").style.display = "block";
            document.getElementById("modalBackdrop").style.display = "block";
        }

        function closeImportModal() {
            document.getElementById("importModal").style.display = "none";
            document.getElementById("modalBackdrop").style.display = "none";
        }
    </script>
</head>
<body>
    <div class="container">
        <h1>收件箱</h1>
        <button onclick="openImportModal()">导入其他邮箱邮件</button>
        <ul>
            <form method="get" action="{{ url_for('main.inbox') }}">
                <input type="number" name="year" placeholder="年份 (2024)">
                <input type="number" name="month" placeholder="月份 (1-12)">
                <input type="text" name="title" placeholder="邮件主题">
                <button type="submit">搜索</button>
            </form>
            {% for email in emails %}
            <li class="email-item">
                <div class="email-details">
                    <span><strong>主题：</strong>{{ email.title }}</span>
                    <span><strong>时间：</strong>{{ email.create_time }}</span>
                    <span><strong>发送人ID：</strong>{{ email.sender_id }}</span>
                </div>
                <div class="email-actions">
                    <a href="{{ url_for('main.view_email', eid=email.eid) }}">
                        <button>查看详情</button>
                    </a>
                    <a href="{{ url_for('main.ai_reply', eid=email.eid) }}">
                        <button>AI自动回复</button>
                    </a>
                </div>
            </li>
            {% endfor %}
        </ul>
    </div>

    <!-- 模态框 -->
    <div id="importModal" class="modal">
        <h2>导入其他邮箱邮件</h2>
        <form method="POST" action="/import_email">
            <div class="form-group">
                <label for="email">邮箱地址</label>
                <input type="email" id="email" name="email" required>
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" name="password" required>
            </div>
            <button type="submit" class="btn-primary">登录并导入邮件</button>
            <button type="button" class="btn-secondary" onclick="closeImportModal()">取消</button>
        </form>
    </div>
    <div id="modalBackdrop" class="modal-backdrop"></div>
</body>
</html>
